<script setup>
import { ref, reactive } from 'vue'
const formInline = reactive({
    type: '',
    date: '',
})
const tableData = ref([
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '崔宏强',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '审核中',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '徐州荟米科技有限公司深圳分公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '开票中',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '北京荟米科技有限公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '已开票',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '徐州荟米科技有限公司深圳分公司',
        invoiceAmount: '100',
        invoiceForm: '纸质发票',
        invoiceStatus: '已寄出',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '徐州荟米科技有限公司深圳分公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '审核未通过',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '北京荟米科技有限公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '已取消',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '徐州荟米科技有限公司深圳分公司',
        invoiceAmount: '100',
        invoiceForm: '纸质发票',
        invoiceStatus: '已寄出',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '北京荟米科技有限公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '审核未通过',
    },
    {
        applicationTime: '2017-10-01 12:00',
        invoiceTitle: '徐州荟米科技有限公司深圳分公司',
        invoiceAmount: '100',
        invoiceForm: '电子发票',
        invoiceStatus: '已取消',
    },
])

</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="page-title bold">发票夹</div>
            <div class="filter-cell">
                    <el-form :inline="true" :model="formInline" class="form-inline">
                        <el-form-item label="发票状态：">
                            <el-select
                            v-model="formInline.type"
                            style="width: 120px;"
                            placeholder="请选择"
                            >
                                <el-option label="审核中" value="1" />
                                <el-option label="开票中" value="2" />
                                <el-option label="已开票" value="3" />
                                <el-option label="已寄出" value="4" />
                                <el-option label="审核未通过" value="5" />
                                <el-option label="已取消" value="6" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="申请时间：">
                            <el-date-picker
                            v-model="formInline.date"
                            type="daterange"
                            style="width: 300px;"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            />
                        </el-form-item>
                        <el-form-item >
                          <el-button >重置</el-button>
                          <el-button type="primary">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            <el-table :data="tableData"  style="width: 100%">
                <el-table-column prop="applicationTime" label="申请时间" width="160" align="center"/>
                <el-table-column prop="invoiceTitle" label="发票抬头"  align="center"/>
                <el-table-column prop="invoiceAmount" label="发票金额" width="160" align="center"/>
                <el-table-column prop="invoiceForm" label="发票形式" width="200" align="center"/>
                <el-table-column prop="invoiceStatus" label="发票状态" width="160" align="center">
                  <template #default="scope">
                    <span class="status-tag" :class="{
                      'status-blue': scope.row.invoiceStatus === '审核中' || scope.row.invoiceStatus === '开票中',
                      'status-success': scope.row.invoiceStatus === '已开票' || scope.row.invoiceStatus === '已寄出',
                      'status-danger': scope.row.invoiceStatus === '审核未通过',
                      'status-gray': scope.row.invoiceStatus === '已取消'
                    }">
                      {{ scope.row.invoiceStatus }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template #default="scope">
                      <el-link v-if="scope.row.invoiceStatus === '已取消'" type="info" style="margin-left: 10px;">-</el-link>
                      <template v-else>
                        <el-link type="primary" >查看</el-link>
                        <el-link v-if="scope.row.invoiceStatus === '审核中'" type="info" style="margin-left: 10px;">取消</el-link>
                      </template>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bs-panel-footer">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
    .table-top{
        margin-bottom: 10px;
        color: #666;
    }
    .dis-view{
        padding: 0 20px;
    }
    .view-row{
        padding: 0 20px;
        .el-col{
            margin-bottom: 20px;
        }
    }
    .view-label{
        color: rgba(0, 0, 0, 0.42745098039215684);
        margin-bottom: 10px;
    }
    .view-value{
        color: rgba(0, 0, 0, 0.42745098039215684);
        .val{
            font-size: 24px;
            color: #000;
        }
    }
    .message-body{
        padding:10px 25px;
    }
    .bs-panel-body{
        position: relative;
        padding: 25px;
    }
    .bs-panel-body:first-child:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #d3d7dc;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .bs-panel-footer{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .filter-cell{
        margin-bottom: 15px;
    }
    .filter-box{
        display: flex;
        align-items: center
    }
    .filter-box .el-select{
        margin: 0 10px;
    }
    .status-tag{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      padding-left: 10px;
    }
    .status-tag::before{
      content: '';
      position: absolute;
      left: 0;
      top: 50%  ;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      display: inline-block;
    }
    .status-blue::before{
      background-color: #007bff;
    }
    .status-blue{
      color: #007bff;
    }
    .status-success::before{
      background-color: #4B9E52;
    }
    .status-success{
      color: #4B9E52;
    }
    .status-danger::before{
      background-color: #AB2617;
    }
    .status-danger{
      color: #AB2617;
    }
    .status-gray::before{
      background-color: #999;
    }
    .status-gray{
      color: #999;
    }




</style>